<template>
    <div class="interview_sign">
        <title-back title="面试签到工具"></title-back>
        <!-- 考生名单 -->
        <div class="examinee_list">
            <div class="examinee_list_filtrate">
                <!-- <Form ref="form" :model="data" :label-width="110" label-position="right">
                    <Row :gutter="24" type="flex" justify="start">
                        <Col v-bind="grid">
                            <FormItem label="请假单编号：" prop="code" label-for="code">
                                <Input v-model="data.code" placeholder="请输入" element-id="code" />
                            </FormItem>
                        </Col>
                        <Col v-bind="grid">
                            <FormItem label="姓名：" prop="name" label-for="name">
                                <Input v-model="data.name" placeholder="请输入" element-id="name" />
                            </FormItem>
                        </Col>
                        <template v-if="collapse">
                            <Col v-bind="grid">
                                <FormItem label="请假类别：" prop="type" label-for="type">
                                    <Select v-width="'100%'" v-model="data.type" placeholder="请选择" element-id="type">
                                        <Option :value="1">事假</Option>
                                        <Option :value="2">病假</Option>
                                        <Option :value="3">病假（工伤）</Option>
                                        <Option :value="4">产假</Option>
                                        <Option :value="5">陪产假</Option>
                                        <Option :value="6">婚假</Option>
                                        <Option :value="7">丧假</Option>
                                        <Option :value="8">节育假</Option>
                                        <Option :value="9">其他假期</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col v-bind="grid">
                                <FormItem label="请假时间：" prop="startTimeSt" label-for="startTimeSt">
                                    <DatePicker v-width="'100%'" type="daterange" v-model="data.startTimeSt" element-id="startTimeSt" />
                                </FormItem>
                            </Col>                    </template>
                        <Col v-bind="grid" class="ivu-text-right">
                            <FormItem>
                                <Button type="primary" @click="searchDableData">搜索</Button>
                                <Button class="ivu-ml-8" @click="emptyData">清空条件</Button>
                                <a v-font="14" class="ivu-ml-8" @click="collapse = !collapse">
                                    <template v-if="!collapse">
                                        展开 <Icon type="ios-arrow-down" />
                                    </template>
                                    <template v-else>
                                        收起 <Icon type="ios-arrow-up" />
                                    </template>
                                </a>
                            </FormItem>
                        </Col>
                    </Row>
                </Form> -->
                <btn-search :dataList="dataList" :searchType="searchType" @searchData="btnSearch">
                    <Select placeholder="当前状态" v-model="drop_down.current_status" style="width:120px;margin-left: 20px">
                        <Option v-for="item in drop_down.current_statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                    <Select placeholder="报考单位" v-model="drop_down.apply_unit" style="width:120px;margin-left: 20px">
                        <Option v-for="item in drop_down.apply_unitList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                    <Select placeholder="报考岗位" v-model="drop_down.apply_post" style="width:120px;margin-left: 20px">
                        <Option v-for="item in drop_down.apply_postList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                    <Select placeholder="签到设备" v-model="drop_down.sign_infacility" style="width:120px;margin-left: 20px">
                        <Option v-for="item in drop_down.sign_infacilityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                    <Select placeholder="签到设备" v-model="drop_down.allot_classroom" style="width:120px;margin-left: 20px">
                        <Option v-for="item in drop_down.allot_classroomList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                    <span style="margin-left: 20px">当前筛选人数：300</span>
                </btn-search>
            </div>
            <div class="examinee_list_table">
                <Table border ref="selection" @on-selection-change="tabSelect" :columns="columns4" :data="dataList">
                <template slot="operation">
                    <Button size="small" style="margin-right: 5px" @click="operationClick">档案资料</Button>
                    <Button size="small" style="margin-right: 5px">删除</Button>
                    <Button size="small" style="margin-right: 5px">手动签到</Button>
                </template>
            </Table>
            </div>
        </div>
        <!-- 分页 -->
        <div class="page">
            <page-processing :dataList="dataList" @pagingProcessing="pagingProcessing"></page-processing>
        </div>
        <!-- 新增考生笔试成绩弹出框 -->
        <Modal v-model="add_written_result" title="新增考生笔试成绩" @on-ok="add_written_result_ok" @on-cancel="add_written_result_cancel">
            <div class="dis-flex form_wrapper">
                <div class="form_left">
                    <Form :model="add_written_form" label-position="left" :label-width="70">
                        <FormItem label="考生姓名">
                            <Input v-model="add_written_form.name"></Input>
                        </FormItem>
                        <FormItem label="准考证号">
                            <Input v-model="add_written_form.admission_num"></Input>
                        </FormItem>
                        <FormItem label="手机号码">
                            <Input v-model="add_written_form.phone"></Input>
                        </FormItem>
                        <FormItem label="报考单位">
                            <Select v-model="add_written_form.unit" style="width:200px">
                                <Option value="请选择单位">请选择单位</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="报考岗位">
                            <Select v-model="add_written_form.station" style="width:200px">
                                <Option value="请选择岗位">请选择岗位</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="笔试成绩">
                            <Input v-model="add_written_form.written"></Input>
                        </FormItem>
                    </Form>
                </div>
            </div>
        </Modal>
        <!-- 新增考生面试成绩弹出框 -->
        <Modal v-model="add_interview_result" title="新增考生面试成绩" @on-ok="add_interview_result_ok" @on-cancel="add_interview_result_cancel">
            <div class="dis-flex add_examinee_wrapper">
                <Form :model="add_written_form" label-position="left" :label-width="70">
                    <FormItem label="考生姓名">
                        <Input v-model="add_interview_form.name"></Input>
                    </FormItem>
                    <FormItem label="准考证号">
                        <Input v-model="add_interview_form.admission_num"></Input>
                    </FormItem>
                    <FormItem label="手机号码">
                        <Input v-model="add_interview_form.phone"></Input>
                    </FormItem>
                    <FormItem label="报考单位">
                        <Select v-model="add_interview_form.unit" style="width:200px">
                            <Option value="请选择单位">请选择单位</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="报考岗位">
                        <Select v-model="add_interview_form.station" style="width:200px">
                            <Option value="请选择岗位">请选择岗位</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="面试成绩">
                        <Input v-model="add_interview_form.interview"></Input>
                    </FormItem>
                 </Form>
            </div>
        </Modal>
    </div>
</template>

<script>
    import titleBack from "../../common/title_back.vue"
    import btnSearch from "../../common/search"
    import pageProcessing from "../../common/pageProcessing"
    export default {
        components: {
            titleBack,
            btnSearch,
            pageProcessing
        },
        data() {
            return {
                fruit: [],
                /* grid: {
                    xl: 8,
                    lg: 8,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                collapse: false,
                data: {
                    code: '',
                    name: '',
                    type: null,
                    startTimeSt: []
                }, */
                drop_down: {
                    /* 下拉框_当前状态 */
                    current_status: "",
                    current_statusList: [
                        {
                            value: '面试已签到',
                            label: '面试已签到'
                        },
                        {
                            value: '面试未签订',
                            label: '面试未签订'
                        }
                    ],
                    /* 下拉框_报考单位 */
                    apply_unit: "",
                    apply_unitList: [
                        {
                            value: '报考单位',
                            label: '报考单位'
                        }
                    ],
                    /* 下拉框_报考岗位 */
                    apply_post: "",
                    apply_postList: [
                        {
                            value: '网格员',
                            label: '网格员'
                        },
                        {
                            value: '社区协调员',
                            label: '社区协调员'
                        }
                    ],
                    /* 下拉框_签到设备 */
                    sign_infacility: "",
                    sign_infacilityList: [
                        {
                            value: '签到设备',
                            label: '签到设备'
                        }
                    ],
                    allot_classroom: "",
                    allot_classroomList: [
                        {
                            value: '分配试室',
                            label: '分配试室'
                        }
                    ]
                },
                searchType: ['name','identity_card','phone'],
                add_written_result: false,
                add_interview_result: false,
                /* 新增考生笔试成绩 */
                add_written_form: {
                    name: "",
                    admission_num: "",
                    phone: "",
                    unit: "请选择单位",
                    station: "请选择岗位",
                    written: ""
                },
                /* 新增考生面试成绩 */
                add_interview_form: {
                    name: "",
                    admission_num: "",
                    phone: "",
                    unit: "请选择单位",
                    station: "请选择岗位",
                    interview: ""
                },
                columns4: [
                    {
                        title: '考生姓名',
                        key: 'name',
                        width: '120'
                    },
                    {
                        title: '身份证号码',
                        key: 'identity_card',
                        width: '200'
                    },
                    {
                        title: '手机号码',
                        key: 'phone',
                        width: '160'
                    },
                    {
                        title: '准考证号',
                        key: 'ticket_num',
                        width: '120'
                    },
                    {
                        title: '当前状态',
                        key: 'sign_status',
                        width: '120'
                    },
                    {
                        title: '签到设备',
                        key: 'sign_facility',
                        width: '100'
                    },
                    {
                        title: '分配试室',
                        key: 'allot_classroom'
                    },
                    {
                        title: '报名单位/岗位',
                        key: 'apply_station'
                    },
                    {
                        title: '操作',
                        slot: 'operation',
                        key: 'register_time'
                    }
                ],
                dataList: [
                    {
                        id: "1",
                        name: "廖奕炯",
                        identity_card: "441522199411290293",
                        phone: "13242012445",
                        ticket_num: "2020-3-17",
                        apply_station: "龙华街道办 / 网格员",
                        sign_facility: "是",
                        sign_status: "面试未签到",
                        allot_classroom: "高圆圆 / 李沁",

                    },
                    {
                        id: "1",
                        name: "廖奕炯",
                        identity_card: "441522199411290293",
                        phone: "13242012445",
                        ticket_num: "2020-3-17",
                        apply_station: "龙华街道办 / 网格员",
                        sign_facility: "是",
                        sign_status: "面试未签到",
                        allot_classroom: "高圆圆 / 李沁",

                    },
                    {
                        id: "1",
                        name: "廖奕炯",
                        identity_card: "441522199411290293",
                        phone: "13242012445",
                        ticket_num: "2020-3-17",
                        apply_station: "龙华街道办 / 网格员",
                        sign_facility: "是",
                        sign_status: "面试未签到",
                        allot_classroom: "高圆圆 / 李沁",

                    },
                    {
                        id: "1",
                        name: "廖奕炯",
                        identity_card: "441522199411290293",
                        phone: "13242012445",
                        ticket_num: "2020-3-17",
                        apply_station: "龙华街道办 / 网格员",
                        sign_facility: "是",
                        sign_status: "面试未签到",
                        allot_classroom: "高圆圆 / 李沁",

                    },
                    {
                        id: "1",
                        name: "廖奕炯",
                        identity_card: "441522199411290293",
                        phone: "13242012445",
                        ticket_num: "2020-3-17",
                        apply_station: "龙华街道办 / 网格员",
                        sign_facility: "是",
                        sign_status: "面试未签到",
                        allot_classroom: "高圆圆 / 李沁",

                    }
                ]
            }
        },
        methods: {
            // 数据搜索
            btnSearch(dataListActive) {
                this.dataListActive = dataListActive
            },
            searchDableData() {
                // console.log(this.$store.state)
                this.dataListActive = this.filterOne(this.dataList, this.searchValue, ["id"])
            },
            /* 清空 */
            emptyData() {

            },
            tabSelect() {

            },
            operationClick() {

            },
            add_written_result_ok () {
                this.$Message.info('设置成功');
            },
            add_written_result_cancel () {
                this.$Message.info('取消了设置');
            },
            add_interview_result_ok () {
                this.$Message.info('设置成功');
            },
            add_interview_result_cancel () {
                this.$Message.info('取消了设置');
            },
            /* 分页处理 */
            pagingProcessing(dataListActive) {
                this.dataListActive = dataListActive
            }
        }
    }
</script>

<style lang="less" scoped>
.interview_sign {
    padding: 0 15px;
    /* 考生名单 */
    .examinee_list {
        // padding: 0 15px;
        .examinee_list_filtrate {
            padding: 10px;
            border:1px solid #ccc;
        }
        .examinee_list_table {
            margin-top: 20px;
        }
    }
}
    /* 准考证设置弹出框 */
    .form_wrapper {
        .form_left {
            margin-right: 20px;
        }
    }
</style>